<template>
  <div class="com_dd">
    <div class="com_box">
      <div class="img">
        <img v-lazy="attrInfo.image" alt="" />
      </div>
      <div class="info">
        <div class="info_td">
          <div class="store_name">{{store_name}}</div>
          <div class="count">x<span>{{cart_num}}</span></div>
        </div>
        <div class="suk">{{attrInfo.suk}}</div>
        <div class="price">￥{{attrInfo.price}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        id:{
            type:Number
        },
        product_id:{
            type:Number
        },
        product_attr_unique:{
            type:String
        },
        attrInfo:{
            type:Object
        },
        cart_num:{
            type:Number
        },
        store_name:{
            type:String
        }
        
    }
};
</script>

<style lang="scss" scoped>
.com_dd {
  width: 100%;
  padding-left: 12px;
  
  .com_box{
      border-bottom: 1px solid #f0f0f0;
      width: 100%;
      display: flex;
      padding: 12px 0;
     .img {
    // flex: 65px;
    width: 65px;
    height: 65px;
    border-radius: 8px;
   
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .info {
    flex: 1;
    height: 65px;
    padding:0 15px;
    .info_td{
        display: flex;
        justify-content: space-between;
        .store_name{
            color: #282828;
            font-size: 14px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            width: 220px;
        }
        .count{
            color: #999;
            font-size: 12px;
            span{
                font-size: 14px;
            }
        }
    }
    .suk{
        margin-top: 2px;
        font-size: 12px;
        color: #999;
    }
    .price{
        margin-top: 7px;
        font-size: 14px;
        color: #fc4141;
    }
  } 
  }
  
}
</style>

